
let sonId = null//子分类
let fatherId = null//父分类
sonId = document.location.href.split('=')[1].split('&')[0]
fatherId = document.location.href.split('=')[2]
//获取大分类的名字
axios.get(`/index/getFatherName?id=${fatherId}`)
.then(data=>{
    $('.innerClassfy')[0].children[0].innerHTML = data.data.data.data.classfyName
})
.catch(err=>{
    console.log(err)
})

//第二个分类名字放进去
axios.get(`/index/getFatherName?id=${sonId}`)
.then(data=>{
    $('.secondTip')[0].innerHTML = data.data.data.data.classfyName
    for(let i = 0;i < $('.secClassfy')[0].children.length;i++){
        if($('.secClassfy')[0].children[i].innerHTML == data.data.data.data.classfyName){
            $('.secClassfy')[0].children[i].style.color = '#D6222E' 
        }else{
            $('.secClassfy')[0].children[i].style.color = '#777777' 
        }
    }
})
.catch(err=>{
    console.log(err)
})

let pageNum = 1
let allPage = null

//获取这个标签下的所有帖子
function getPostBySonId(classifyId,pageNum){
    axios.get(`/index/getPostBySonId?classifyId=${classifyId}&pageNum=${pageNum}`)
    .then(data=>{
        if(data.data.data.code == 200001){
            $('.loading')[0].innerHTML = data.data.data.message
        }else{
            allPage = data.data.data.data.pageCount
            let list = data.data.data.data.forums
            console.log(list)
            waterFull(list)
            // console.log(list)
        }
        // console.log(data)
        
    })
    .catch(err=>{
        console.log(err)
    })
}
getPostBySonId(sonId,pageNum)
  





var box = null
var main = $('.main')[0]


var colNum = 0
var mainWidth = 0

let promiseList = []
function waterFull(postInfo){
    for(var i = 0;i < postInfo.length;i++){
        promiseList.push(getFirstImg(postInfo[i].id,postInfo[i]))
    }
    Promise.all(promiseList).then(obj=>{
        let str = ''
        for(let i = 0;i < obj.length;i++){
            str += `
                <div class="box" data-index=${i}>
                    <div style="width:100%;height:250px;">
                        <img class="postImg" onclick='toAlbum(${obj[i].data.id})' src="${obj[i].src}"/>
                    </div>
                    <div class="else">
                        <p class="context">
                            ${obj[i].data.context?obj[i].data.context:' '}
                        </p>
                        <div class="likeLoveNum">
                            <div class="like">
                                <i class="iconfont icon-dianzan"></i>
                                <p class="likeNum">${obj[i].data.thumbUpCount}</p>
                            </div>
                            <div class="love">
                                <i class="iconfont icon-shoucang"></i>
                                <P class="loveNum">${obj[i].data.collectCount}</P>
                            </div>
                        </div>
                        <div class="postOwner" onclick=toPerson(${obj[i].data.userId})>
                            <img src="${obj[i].data.portrait}" class="headImg"/>
                            <div class="nameResum">
                                <p class="name">${obj[i].data.name}</p>
                                <p class="resume">${obj[i].data.resume || 'TA很懒，什么也没有留下~'}</p>
                            </div>
                        </div>
                    </div>
                </div>
                `
        }
        main.innerHTML += str//在页面中插入box
        let img = $('.postImg')//获取所有的图片
        box = document.getElementsByClassName('box');//获取所有的box
        // let imgOk = null//用来判断所有图片是否加载结束
        // for(var i = 0;i < img.length;i++){
        //     img[i].onload = function(){//当图片加载完成之后
        //         imgOk += 1
        //         // console.log('图片加载完成')
        //         if(imgOk === box.length){//所有图片加载完成之后开始布局
        //             changeRow()
        //         }
        //     }
        // }
        observeFunc()
    })
    promiseList = []//清空promiseList内容
}

async function getFirstImg(id,data){
    let obj = {}
    let src  = null
    let img = await axios.get(`/index/getPost?postId=${id}`)
    console.log('..............................')
    console.log(img.data.data.data.path)
    if(img.data.data.data.path){
        src = img.data.data.data.path.split('[')[1].split(']')[0].split(',')[0]
    }else{
        src = 'https://kele-1305880580.cos.ap-beijing.myqcloud.com/PicOfZhao/1d58b8d19e6c415f81dd531b0ea984d2.jpg'
    }
    console.log('图片一样是因为添加的数据不合规')
    obj['src'] = src
    obj['data'] = data
    return obj
}



//获取高度数组的高度最低的一列的index值
function getMinHeight(arr){
    var minHeight = Math.min.apply(null, arr)
    for(var i = 0;i < arr.length;i++){
        if(minHeight == arr[i]){
            return i
        }else{
            continue
        }
    }
}

let observeFunc = ()=>{
    let observer = new IntersectionObserver(observerCallback)
    function observerCallback(arg){
        if(arg[0].intersectionRatio > 0){
            observer.unobserve(box[box.length-1])//当最后一张图片出现的时候取消对它的监听
            //获取一组新的图片并进行布局
            if(pageNum+1 > allPage){
                $('.loading')[0].innerHTML = `
                <p>没有内容了，看点别的去吧</p>
                `
            }else{
                pageNum += 1
                getPostBySonId(sonId,pageNum)
            }
        }
    }
    observer.observe(box[box.length-1])
}
function changeRow(){
    // console.log(`页面宽度${document.body.clientWidth}`)
    // console.log(`main的内容宽${main.clientWidth }`);//clientWidth
    // colNum = Math.floor(`${document.body.clientWidth*0.99 / (box[0].offsetWidth+10)}`)//10是box的margin-right值。获得列数，向下取整

    // mainWidth = colNum * (box[0].offsetWidth+10)//根据列数求main的宽度并且改变样式

    // main.style.width = `${mainWidth}px`

    // // console.log('列数'+colNum) 

    // let heightArr = []//为了放每一列的高度
    // for(var i = 0;i < box.length;i++){
    //     if(i < colNum){//当box小于列数的时候，表示这是第一行
    //         box[i].style.top = `0px`//当前盒子距离顶部的值0
    //         box[i].style.left = `${(box[0].offsetWidth+10) * (i)}px`//当前盒子距离左边的值为 索引值*box宽度
    //         heightArr.push(box[i].offsetHeight+20)//20是box的margin-bottom值
    //     }else{//这时候已经至少是第二行了，要找哪一列高度比较低放到哪里
    //         let index = getMinHeight(heightArr)//这是高度最低那一列的索引值
    //         box[i].style.top = `${heightArr[index]}px`//当前盒子距离顶部的值为该列高度数组的值
    //         box[i].style.left = `${(box[0].offsetWidth+10) * index}px`//当前盒子距离左边的值为 索引值*box宽度
    //         //当前box被放好之后要更新高度数组的值
    //         heightArr[index] += box[i].offsetHeight+20
    //     }
    // }
    // //同时要管理main高度塌陷问题
    // let maxHeight = Math.max.apply(null,heightArr)
    // main.style.height = `${maxHeight+20}px`
    //监听高度最低的一列的最后一张图片
    let observer = new IntersectionObserver(observerCallback)
    function observerCallback(arg){
        if(arg[0].intersectionRatio > 0){
            observer.unobserve(box[box.length-1])//当最后一张图片出现的时候取消对它的监听
            //获取一组新的图片并进行布局
            if(pageNum+1 > allPage){
                $('.loading')[0].innerHTML = `
                <p>没有内容了，看点别的去吧</p>
                `
            }else{
                pageNum += 1
                getPostBySonId(sonId,pageNum)
            }
        }
    }
    observer.observe(box[box.length-1])
}



let timer = null
window.addEventListener('resize',()=>{//监听屏幕可视区域大小的变化
    clearTimeout(timer)
    timer = setTimeout(changeRow,200)
    console.log(111)
})


function toAlbum(id){
    window.location.href = `/picture/picDetail?postId=${id}`
}
function toPerson(id){
    window.location.href = `/picture/picture?userId=${id}`

}

//监听滚动条，返回页面顶部
let scrollTime = null
window.addEventListener('scroll',scrollFunc)
function scrollFunc(){
    clearTimeout(scrollTime)
    scrollTime = setTimeout(function(){
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if(scrollTop > 1298){
            $('.toTop')[0].style.display = 'inline-block'
        }else{
            $('.toTop')[0].style.display = 'none'
        }
    },600)

}